* {
	margin: 0;
	padding: 0;
}

.container {
	width: 100%;
	height: 400px;
	margin: 200px auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 24px;
}


.btn {
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.3), -18px -18px 30px rgba(255, 255, 255, 1);
	transition: all 0.3s ease-out;
}

.btn_img {
	width: 60px;
	transition: all 0.3s ease-out;
}

.btn:hover {
	cursor: pointer;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
		0 0 0 rgba(255, 255, 255, 0.1),
		inset 18px 18px 30px rgba(0, 0, 0, 0.3),
		inset -18px 30px rgba(255, 255, 255, 1);
}

.btn:hover .btn_img {
	width: 55px;
	height: 55px;
}